<template>
  <div class="add-device-page">
    <!-- 顶部导航 -->
    <div class="page-header add-device-header">
      <div class="header-content">
        <button class="back-btn" @click="goBack">
          <span class="back-icon">←</span>
        </button>
        <h1 class="page-title">新增设备</h1>
        <div class="placeholder"></div>
      </div>
    </div>

    <!-- 表单内容 -->
    <div class="page-content add-device-content">
      <div class="form-container">
        <form @submit.prevent="submitDevice">
          <!-- 设备名称 -->
          <div class="form-group">
            <label class="form-label">设备名称 *</label>
            <input 
              type="text" 
              v-model="deviceForm.name" 
              class="form-input" 
              placeholder="请输入设备名称，如：MacBook Pro、iPhone、相机等"
              required
            >
          </div>

          <!-- 设备类型 -->
          <div class="form-group">
            <label class="form-label">设备类型</label>
            <select v-model="deviceForm.category" class="form-select">
              <option value="">请选择设备类型</option>
              <option value="电脑设备">电脑设备</option>
              <option value="手机平板">手机平板</option>
              <option value="摄影设备">摄影设备</option>
              <option value="音响设备">音响设备</option>
              <option value="游戏设备">游戏设备</option>
              <option value="智能家居">智能家居</option>
              <option value="运动设备">运动设备</option>
              <option value="其他">其他</option>
            </select>
          </div>

          <!-- 品牌型号 -->
          <div class="form-group">
            <label class="form-label">品牌型号</label>
            <input 
              type="text" 
              v-model="deviceForm.brand" 
              class="form-input" 
              placeholder="请输入品牌和型号，如：Apple MacBook Pro 14寸"
            >
          </div>

          <!-- 购买时间 -->
          <div class="form-group">
            <label class="form-label">购买时间</label>
            <select v-model="deviceForm.purchaseTime" class="form-select">
              <option value="">请选择购买时间</option>
              <option value="1个月内">1个月内</option>
              <option value="3个月内">3个月内</option>
              <option value="半年内">半年内</option>
              <option value="1年内">1年内</option>
              <option value="1-2年">1-2年</option>
              <option value="2-3年">2-3年</option>
              <option value="3年以上">3年以上</option>
            </select>
          </div>

          <!-- 设备状态 -->
          <div class="form-group">
            <label class="form-label">设备状态</label>
            <select v-model="deviceForm.condition" class="form-select">
              <option value="">请选择设备状态</option>
              <option value="全新">全新</option>
              <option value="几乎全新">几乎全新</option>
              <option value="良好">良好</option>
              <option value="一般">一般</option>
              <option value="需要维修">需要维修</option>
            </select>
          </div>

          <!-- 使用频率 -->
          <div class="form-group">
            <label class="form-label">使用频率</label>
            <select v-model="deviceForm.usage" class="form-select">
              <option value="">请选择使用频率</option>
              <option value="每天使用">每天使用</option>
              <option value="经常使用">经常使用</option>
              <option value="偶尔使用">偶尔使用</option>
              <option value="很少使用">很少使用</option>
              <option value="闲置">闲置</option>
            </select>
          </div>

          <!-- 设备描述 -->
          <div class="form-group">
            <label class="form-label">设备描述</label>
            <textarea 
              v-model="deviceForm.description" 
              class="form-textarea" 
              placeholder="描述设备的详细信息、配置、使用感受或其他特殊说明"
              rows="4"
            ></textarea>
          </div>

          <!-- 共享选项 -->
          <div class="form-group">
            <label class="form-label">共享选项</label>
            <div class="checkbox-group">
              <label class="checkbox-option">
                <input type="checkbox" v-model="deviceForm.canLend">
                <span class="checkbox-label">我愿意借出此设备</span>
              </label>
              <label class="checkbox-option">
                <input type="checkbox" v-model="deviceForm.canSell">
                <span class="checkbox-label">我考虑出售此设备</span>
              </label>
              <label class="checkbox-option">
                <input type="checkbox" v-model="deviceForm.canExchange">
                <span class="checkbox-label">我愿意交换此设备</span>
              </label>
            </div>
          </div>

          <!-- 提交按钮 -->
          <div class="form-actions">
            <button type="button" class="cancel-btn" @click="goBack">取消</button>
            <button type="submit" class="submit-btn">保存设备</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AddDevice',
  data() {
    return {
      deviceForm: {
        name: '',
        category: '',
        brand: '',
        purchaseTime: '',
        condition: '',
        usage: '',
        description: '',
        canLend: false,
        canSell: false,
        canExchange: false
      }
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    submitDevice() {
      // 表单验证
      if (!this.deviceForm.name.trim()) {
        alert('请输入设备名称')
        return
      }
      
      // 获取现有设备列表
      const existingDevices = JSON.parse(localStorage.getItem('userDevices') || '[]')
      
      // 创建新设备对象
      const newDevice = {
        id: Date.now(),
        name: this.deviceForm.name.trim(),
        category: this.deviceForm.category,
        brand: this.deviceForm.brand,
        purchaseTime: this.deviceForm.purchaseTime,
        condition: this.deviceForm.condition,
        usage: this.deviceForm.usage,
        description: this.deviceForm.description,
        canLend: this.deviceForm.canLend,
        canSell: this.deviceForm.canSell,
        canExchange: this.deviceForm.canExchange,
        createdAt: new Date().toISOString()
      }
      
      // 添加到设备列表
      existingDevices.push(newDevice)
      
      // 保存到localStorage
      localStorage.setItem('userDevices', JSON.stringify(existingDevices))
      
      console.log('设备保存成功:', newDevice)
      alert('设备添加成功！')
      
      // 提交成功后返回上一页
      this.goBack()
    }
  }
}
</script>

<style scoped>
.add-device-page {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding-bottom: 80px;
}

/* AddDevice页面特有的样式 */

.add-device-header {
  height: 80px;
  box-sizing: border-box;
}

.add-device-header .header-content {
  justify-content: center;
  height: 100%;
}

.back-btn {
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.back-btn:hover {
  background: #f5f5f5;
  color: #007aff;
}

/* 页面标题样式已在App.vue中统一定义 */

.placeholder {
  width: 40px;
}

/* 页面内容样式已在App.vue中统一定义 */

.form-container {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e1e8ed;
  border-radius: 12px;
  font-size: 16px;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #42a5f5;
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkbox-option {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-option input[type="checkbox"] {
  margin-right: 12px;
}

.checkbox-label {
  font-size: 16px;
  color: #2c3e50;
}

.form-actions {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

.cancel-btn,
.submit-btn {
  flex: 1;
  padding: 16px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn {
  background-color: #f8f9fa;
  color: #6c757d;
  border: 2px solid #e1e8ed;
}

.cancel-btn:hover {
  background-color: #e9ecef;
}

.submit-btn {
  background: linear-gradient(135deg, #42a5f5, #90caf9);
  color: white;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(66, 165, 245, 0.4);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .form-container {
    padding: 16px;
  }
  
  .form-actions {
    flex-direction: column;
  }
}
</style>